<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
    <style type="text/css">
        .body {
            font-family: "";
            font-size: 14px;
        }

        .content {
            width: 300px;
            padding: 10px;
            border: 1px dashed gray;
        }

        .content div {
            font-size: 16px;
            font-weight: bold;
            height: 24px;
            line-height: 24px;
        }
    </style>
    <title>各科小常识</title>
</head>

<body>
    <h1>各科小常识</h1>
    <hr>
    <h2>语文</h2>
        <p>中国四大名著
        <ol>
        <li>《西游记》</li>
        <li>《红楼梦》</li>
        <li>《三国演义》</li>
        <li>《水浒传》</li>
        </ol>>

    <hr>

    <div id="main">

        <h3>绿叶学习网</h3>

        <iframe src="http://www.baidu.com" width="400px" height="300px"></iframe>

    </div>

    <p>“<span style="font-weight:bold;color:#80ff00;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>

    <div class='content'>
        <div>web 前端开发 </div>
        <p>web前端开发最核心3个技术：HTML、CSS和JavaScript HTML控制网页的 结构，CSS控制网页的样式，JavaScript控制网页的行为。</p>
    </div>
    <hr>
    <div class='content'>
        <table>
            <caption>考试成绩表</caption>
            <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            </tfoot>
        </table>

    </div>

    <div>
        <input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>
        <input id="cbk" name="cbk" type="checkbox" /><label for="cbk">复选框</label>
    </div>
    <hr>
    <form action="index.aspx" method="post">
        <div>登录绿叶学习网</div>
        <p>
            <label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
        </p>
        <label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
        <input type="checkbox" id= "remember-me" name="remember-me"/> <label for="remember-me"> 记住我 </label>
        <input type="submit" value="登录"/>
    </form>>
    <hr>
    <div>

        <span> 两个span的小用法（配合一下无序列表好像更好看一些）</span><br/><br/>

        <span>第 1 部分内容 </span><br/>

        <span>第 2 部分内容 </span><br/>

        <span>第 3 部分内容 </span>

    </div>

    <ul>
        <li><span>l</span>HTML 教程 </li>
        <li><span>2</span>CSS 教程 </li>
        <li><Span>3</span>JavaScript 教程 </li>
    </ul>
    <hr>
    <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
    <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
        <source src="./media/video.mp4" type="video/mp4">
        <source src="./media/video.ogg" type="video/ogg">
    </video>

</body>
</html>